<template>
  <div class="coupon">
    <!--S用户信息-->
    <div class="user">
      <img class="avatar" :src="data.member.avatar" />
      <p class="nickname">{{data.member.nickname}}</p>
      <p class="uid">UID:{{data.member_id}}</p>
    </div>
    <!--E用户信息-->
    <!--S卡券内容-->
    <div class="content">

      <!--S卡券封面-->
      <img class="cover" v-if="data.cover" :src="data.cover" />
      <!--E卡券封面-->

      <!--S卡券名字-->
      <p class="name" :style="{width: data.cover ? '':'100%'}" >{{data.name}}</p>
      <!--E卡券名字-->

      <!--S卡券类型-->
      <p class="type">类型：{{data.type_str}}<span>{{data.value}}</span></p>
      <!--E卡券类型-->

      <!--S卡券有效期-->
      <p class="time">有效期：{{data.time_str}}</p>
      <!--E卡券有效期-->

      <!--S核销地址-->
      <p class="address">核销地址：{{data.address}}</p>
      <!--E核销地址-->

      <!--S操作按钮组-->
      <el-button-group class="detail-btn">
        <el-button type="success" size="mini" @click="$emit('detail',data)">核销规则</el-button>
        <el-button type="success" size="mini" @click="$emit('pass',data)">通过审核</el-button>
        <el-button type="success" size="mini" @click="$emit('refuse',data)">拒绝审核</el-button>
        <el-button type="success" size="mini" @click="$emit('remove',data)">删除卡券</el-button>
      </el-button-group>
      <!--E操作按钮组-->
    </div>
  </div>
</template>

<script>
export default {
  name: 'Coupon',
  props: {
    data: {
      type: Object,
      default: () => {
        return {}
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .coupon{
    position: relative;
    width: 400px;
    height: 225px;
    background: #FAC754;
    border-radius: 10px;
    cursor: pointer;
    float: left;
    margin: 0 15px 15px 0;
    box-shadow: 1px 0 5px 0 #ccc;
    p{
      margin: 0;
      padding: 0;
      font-size: 12px;
    }
    .user{
      padding:0 5px;
      height: 50px;
      background: #fff;
      border-radius: 9px 9px 0 0;
      *{
        float: left;
        line-height: 50px;
        color: #000c17;
      }
      .avatar{
        display: block;
        width: 38px;
        height: 38px;
        border-radius: 17.5px;
        margin-top: 5px;
      }
      .nickname{
        width: 200px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        margin-left: 5px;
      }
      .uid{
        float: right;
      }
    }
    .content{
      padding:5px;
      box-sizing: border-box;
      .cover{
        width: 50px;
        height: 50px;
        float: left;
        margin-right: 5px;
        object-fit: cover;
      }
      p{
        width: 100%;
        color: #fff;
        float: left;
        &.name{
          width: 335px;
        }
        &.type{
          width: 100%;
          margin: 5px 0 5px 0;
          span{
            float: right;
          }
        }
      }
      .detail-btn{
        position: absolute;
        right: 10px;
        bottom: 10px;
      }
    }
  }
</style>
